<template>
	<view>
		<view class="page_header">
			<view class="user_box">
				<img src="" alt="" />
				<view class="user_info">
					<view class="user_name">
						帅强的一米
					</view>
					<view class="user_class">
						学号:20123456
					</view>
					<view class="user_class">
						班级:2023护理一班
					</view>
				</view>
			</view>
			<view class="user_award_box">
				<view class="user_award">
					<img src="@/static/image/userCenter/award.png" alt="" />
					<span>11</span>
				</view>
				<img src="@/static/image/userCenter/user-border.png" alt="" />
				<view class="user_award">
					<img src="@/static/image/userCenter/award02.png" alt="" />
					<span>11</span>
				</view>
				<img src="@/static/image/userCenter/user-border.png" alt="" />
				<view class="user_award">
					<img src="@/static/image/userCenter/award03.png" alt="" />
					<span>11</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.page_header {
	position: relative;
	padding: 46px 20px 0;
	height: 180px;
	box-sizing: border-box;
	background: url('/static/image/userCenter/user-bg.png') no-repeat center;
	background-size: cover;
	.user_box {
		display: flex;
		margin-bottom: 10px;
		img {
			width: 72px;
			height: 72px;
			margin-right: 15px;
		}
		.user_info {
			flex: 1;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #999999;
			.user_name {
				font-weight: bold;
				font-size: 16px;
				color: #333333;
				margin-bottom: 15px;
			}
		}
	}
	.user_award_box {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		background: url('/static/image/userCenter/user-bg01.png') no-repeat center;
		background-size: 100% 100%;
		img {
			width: 2px;
			height: 15px;
		}
		.user_award {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 15px;
			color: #FFFFFF;
			padding: 0 25px;
			img {
				width: 32px;
				height: 32px;
			}
		}
	}
}
</style>
